<template>
  <div>
    <div class="zyfund-main">
      <!-- 页头 -->
      <div class="zyhead">
        <div class="zyhead-1">
          <router-link to="All">
            <img src="../assets/img/返回箭头 (1).png" alt=""
          /></router-link>
        </div>
        <div class="zyhead-2">基金</div>
        <div class="zyhead-3">
          <router-link to="FundSearch"
            ><img src="../assets/img/放大镜.png" alt=""
          /></router-link>
        </div>
        <!-- <p class="zyhead-4">. . .</p> -->
      </div>
      <!-- 金额 -->
      <div class="zyregister">
        <div class="zyregister-1">
          <p class="zyre-1">
            总金额
            <img src="../assets/img/闭眼睛.png" alt="" id="zyre" />
          </p>
          <p class="zyre-3" id="zyre3">&nbsp;&nbsp;&nbsp;&nbsp;{{ congealFund }}元</p>
        </div>
        <div class="zyre-2"><button>查看详情&nbsp;</button></div>
      </div>
      <!-- 选择块 -->
      <div class="zyselect">
        <ul class="zyselect-1">
          <li>
            <img src="../assets/img/服务超市.png" alt="" />
            <p @click="supermater">基金超市</p>
          </li>

          <li>
            <router-link to="vieww">
              <img src="../assets/img/日历.png" alt="" />
              <p>首发基金</p>
            </router-link>
          </li>

          <li>
            <router-link to="Transfer3">
              <img src="../assets/img/我的基金.png" alt="" />
              <p>优选基金</p>
            </router-link>
          </li>
          <li>
            <router-link to="Ranking">
              <img id="zyselect1" src="../assets/img/奖杯.png" alt="" />
              <p>排行榜</p>
            </router-link>
          </li>
          <li>
            <router-link to="Invest">
              <img src="../assets/img/基金.png" alt="" />
              <p>基金定投</p>
            </router-link>
          </li>
          <li>
            <img src="../assets/img/我的基金.png" alt="" />
            <p>农银快e宝</p>
          </li>
          <li>
            <router-link to="PayofFcast">
              <img src="../assets/img/日历.png" alt="" />
              <p>轻盈投</p>
            </router-link>
          </li>
          <li>
            <a href="http://124.221.98.163:8000/lives.html">
              <img src="../assets/img/直播 (1).svg" alt="" />
              <p>基金直播</p>
            </a>
          </li>
        </ul>
      </div>
      <!-- 轮播图 -->
      <div class="zyslideshow">
        <img src="../assets/img/轮播图1.jpg" alt="" id="zylbimg" />
        <button id="zybtn"></button>
        <button id="zybtn1"></button>
        <button id="zybtn2"></button>
      </div>
      <!-- 广告图 -->
      <div class="zyadvertising">
        <img src="../assets/img/广告图.webp" alt="" />
      </div>
      <!-- 热门主题 -->
      <div class="zytopic">
        <div class="zytopic1">
          <a href="">热门主题</a>
          <a href=""> <img src="../assets/img/跳转箭头.png" alt="" /> </a>
        </div>
        <div class="zymessage">
          <div class="zymessage-1">信息</div>
          <div class="zymessage-2">
            <p>智能时代，正在开启</p>
            <p>政策加码，巨头入局，科技新周期即将到来</p>
          </div>
        </div>
        <div class="zymedicine">
          <div class="zymedicine-1">医药</div>
          <div class="zymedicine-2">
            <p>人类发展的刚需行业</p>
            <p>行业格局重塑，新产品、新技术带来成长</p>
          </div>
        </div>
      </div>
      <!-- 首发基金 -->
      <div class="zyfirst-publish">
        <div class="zypublish-1">
          <a href="">首发基金</a>
          <a href=""> <img src="../assets/img/跳转箭头.png" alt="" /> </a>
        </div>
        <div class="zypublish-2">
          <div class="zypublish-21">
            <p>04/28-05/19</p>
            <P>农银中证1000指...</P>
            <p>017323</p>
            <div class="zyp1">
              <span>股票型</span>
              <span>中等风险</span>
            </div>
          </div>
          <div class="zypublish-21">
            <p>04/26-05/19</p>
            <P>东方红颐安稳健养...</P>
            <p>017775</p>
            <div class="zyp1">
              <span>混合型</span>
              <span>中等风险</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 基金资讯 -->
      <div class="zyinformation">
        <div class="zyinformation-1">
          <a href="">基金资讯</a>
          <a href=""> <img src="../assets/img/跳转箭头.png" alt="" /> </a>
        </div>
        <ul class="zyinformation-2">
          <li class="zyin1">
            <p>华商基金彭欣杨：依靠成长穿 <br />越周期 关注科技、创新医...</p>
            <p>2023-05-05</p>
          </li>
          <li class="zyin2">
            <img src="../assets/img/广告1.webp" alt="" />
          </li>
        </ul>
        <ul class="zyinformation-2">
          <li class="zyin1">
            <p>快讯：分化持续沪指一度涨近 <br />1%大金融板块发力</p>
            <p>2023-05-04</p>
          </li>
          <li class="zyin2">
            <img src="../assets/img/广告2.webp" alt="" />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { regular } from "../api/interrevolution2";
import { Dialog } from "vant";
export default {
  data() {
    return {
      congealFund: "",
    };
  },
  methods: {
    //跳转基金超市
    supermater() {
      this.$router.push({
        name: "BulkDensity",
        params: {},
      });
    },
    fun() {
      regular()
        .then((res) => {
          if (res.code == 200) {
            this.congealFund = res.data.congealFund;
          } else {
            Dialog({ title: "温馨提示", message: res.msg });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.fun();
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
li {
  list-style: none;
}
.zyfund-main {
  width: 390px;
  height: 844px;
  padding: 0 5px;
}
/* 页头 */
.zyhead {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: black;
  text-align: center;
  width: 390px;
  height: 50px;
  background-color: white;
}
.zyhead-1 img {
  width: 20px;
  height: 20px;
  margin-left: 8px;
}
.zyhead-2 {
  margin-left: 153px;
  font-weight: 600;
}
/* .head-3{
    display: flex;
} */
.zyhead-3 img {
  width: 18px;
  height: 18px;
  margin-right: -303px;
  margin-top: 8px;
}
.zyhead-4 {
  width: 18px;
  margin-left: 70px;
  margin-top: -53px;
}
/* 金额 */
.zyregister {
  width: 390px;
  height: 100px;
  background-color: rgba(255, 166, 0, 0.674);
  color: white;
  text-align: center;
  display: flex;
  justify-content: space-between;
}
.zyregister-1 {
  margin-top: 20px;
}
.zyre-1 {
  margin-left: 15px;
}
.zyre-1 img {
  width: 20px;
  height: 20px;
}
.zyre-3 {
  margin-left: -10px;
  margin-top: 10px;
}
.zyre-2 {
  margin-top: 40px;
}
.zyregister .zyre-2 button {
  width: 100px;
  height: 25px;
  background-color: rgba(255, 166, 0, 0.674);
  color: white;
  border-radius: 10px;
  border: 0;
  margin-right: 10px;
  font-size: 16px;
}
/* 选择块 */
.zyselect {
  width: 390px;
  height: 170px;
  margin-top: 20px;
}
.zyselect-1 {
  display: flex;
  flex-wrap: wrap;
}
.zyselect-1 li img {
  width: 30px;
  height: 30px;
}
.zyselect-1 li {
  width: 25%;
  height: 80px;
  font-size: 14px;
  text-align: center;
}
.zyselect-1 li p {
  font-weight: 600;
}
/* 轮播图 */
.zyslideshow {
  width: 390px;
  height: 190px;
  text-align: center;
}
.zyslideshow img {
  width: 97%;
  height: 190px;
  border-radius: 5px;
}
.zybtn {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  color: rgba(114, 114, 114, 0.749);
}
/* 广告图 */
.zyadvertising {
  width: 390px;
  height: 100px;
  margin-top: 30px;
}
.zyadvertising img {
  width: 97%;
  height: 100px;
  border-radius: 5px;
}
/* 热门主题 */
.zytopic {
  margin-top: 30px;
}
.zytopic1 {
  display: flex;
  justify-content: space-between;
}
.zytopic1 a {
  display: block;
}
.zytopic1 a:nth-child(1) {
  font-weight: 600;
  font-size: 16px;
  color: black;
}
.zytopic1 img {
  width: 15px;
  height: 15px;
  margin-right: 10px;
  margin-top: 5px;
}
.zymessage {
  display: flex;
  margin-top: 20px;
}
.zymessage-1 {
  width: 40px;
  height: 40px;
  border: 1px dashed rgb(26, 150, 244);
  border-radius: 50%;
  color: rgb(26, 150, 244);
  font-size: 10px;
  text-align: center;
  line-height: 40px;
}
.zymessage-2 {
  margin-left: 10px;
}
.zymessage-2 p:nth-child(1) {
  font-size: 14px;
}
.zymessage-2 p:nth-child(2) {
  font-size: 12px;
  color: rgb(97, 97, 97);
  margin-top: 5px;
}
.zymedicine {
  display: flex;
  margin-top: 15px;
}
.zymedicine-1 {
  width: 40px;
  height: 40px;
  border: 1px dashed rgb(26, 239, 171);
  border-radius: 50%;
  color: rgb(26, 239, 171);
  font-size: 10px;
  text-align: center;
  line-height: 40px;
}
.zymedicine-2 {
  margin-left: 10px;
}
.zymedicine-2 p:nth-child(1) {
  font-size: 14px;
}
.zymedicine-2 p:nth-child(2) {
  font-size: 12px;
  color: rgb(97, 97, 97);
  margin-top: 5px;
}
/* 首发基金 */
.zyfirst-publish {
  margin-top: 20px;
}
.zypublish-1 {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.zypublish-1 a {
  display: block;
}
.zypublish-1 a:nth-child(1) {
  font-weight: 600;
  font-size: 16px;
  color: black;
}
.zypublish-1 img {
  width: 15px;
  height: 15px;
  margin-right: 10px;
  margin-top: 5px;
}
.zypublish-2 {
  display: flex;
  margin-top: 30px;
}
.zypublish-21 {
  width: 200px;
  height: 130px;
  text-align: center;
}
.zypublish-21 p:nth-child(1) {
  width: 80px;
  height: 20px;
  background-color: orange;
  color: white;
  font-size: 10px;
  text-align: center;
  line-height: 20px;
  margin-left: 50px;
  margin-bottom: 20px;
}
.zypublish-21 p:nth-child(2) {
  font-size: 14px;
  margin-bottom: 5px;
}
.zypublish-21 p:nth-child(3) {
  font-size: 10px;
  color: rgb(120, 118, 118);
  margin-bottom: 20px;
}
.zyp1 span {
  font-size: 10px;
  border: 1px solid rgb(178, 177, 177);
  padding: 2px 8px;
  color: rgb(128, 127, 127);
}
/* 基金资讯 */

.zyinformation-1 {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.zyinformation-1 a {
  display: block;
}
.zyinformation-1 a:nth-child(1) {
  font-weight: 600;
  font-size: 16px;
  color: black;
}
.zyinformation-1 img {
  width: 15px;
  height: 15px;
  margin-right: 10px;
  margin-top: 5px;
}
/* 基金资讯 */
.zyinformation-2 {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.zyinformation-2 img {
  width: 120px;
  height: 80px;
  margin-right: 20px;
  border-radius: 5px;
}
.zyin1 p:nth-child(1) {
  font-size: 14px;
}
.zyin1 p:nth-child(2) {
  margin-top: 20px;
  font-size: 10px;
  color: rgb(143, 141, 141);
}
</style>
